<template>
    <!-- Vue3可以没有根标签，但是其内部是将组件内的标签都放入了一个fragment标签里 -->
    <h2>我是根组件，数据：{{ name }}---{{ price }}</h2>
    <h2>总和：{{ sum }}</h2>
    <button @click="sum++">sum++</button>
</template>

<script>
import { ref, reactive, toRefs } from "vue";
export default {
  name: "App",
  setup(props) {

    const car = reactive({name: "奔驰",price: "40W"});
    const sum = ref(0)

    return {
      ...toRefs(car),
      sum
    };
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: orange;
  padding: 10px 30px;
}
</style>
